import { nanoid } from 'nanoid'
export const initstate = {
    todoLists: [
        { id: 1, name: "包", age: 18, address: "西湖" },
        { id: 2, name: "俊", age: 19, address: "余杭" },
        { id: 3, name: "超", age: 20, address: "上城" },
    ],
    isModalVisible: false,  //  控制 弹框 显示和 隐藏的
}

export const actions = {
    showModal(payload) {  // 显示 弹框组件
        // console.log("显示弹框组件", payload)
        return {
            type: "SHOW_MODAL",
            payload
        }
    },

    updateAction(payload) {
        console.log("更新：：", payload)
        return {
            type: "UPDATEACTION",
            payload
        }
    },

    deteleAction(payload) {  // 删除
        return {
            type: "DETELEACTION",
            payload
        }
    },

    upAction(payload) {  // 上移
        return {
            type: "UPACTION",
            payload
        }
    },
    downAction(payload) {  // 下移
        return {
            type: "DOWNACTION",
            payload
        }
    }
}

export function reducers(state = initstate, { type, payload }) {
    const newState = JSON.parse(JSON.stringify(state))
    switch(type) {
        case "SHOW_MODAL":  // 添加
            // console.log(" 弹框显示和隐藏 到 reducers 里面了 ", payload)
            // 如果 payload 有值，在进行 push 操作
            if(payload?.add) {
                const {age, name, address} = payload
                payload.name && newState.todoLists.push({ age: payload.age, name: payload.name, address: payload.address, id: nanoid() })
            }
           
            newState.isModalVisible = !newState.isModalVisible
            break;
        case "UPDATEACTION":  //  更新
            if(payload?.updata) {
                // console.log("更新 -- 更新", payload)
                const { id, name, age, address} = payload
                let Itemindex = payload.index
                newState.todoLists.splice(Itemindex, 1, {id, name, age, address})
            }
            break;
        case "DETELEACTION":   //  删除
            // console.log("删除:", payload)
            newState.todoLists.splice(payload, 1)  //  删除 
            break;
        case "UPACTION":  // 上移
            const {id, name, address, age } = payload
            let Itemindex = payload.index
            newState.todoLists.splice(Itemindex -1, 0, {id, name, address, age})
            let aa = newState.todoLists.filter(f => f.id == id)[1]
            // console.log("aa", aa)
            let newIndex = newState.todoLists.lastIndexOf(aa)
            let a = newState.todoLists.filter((f, index) => index !== newIndex)
            newState.todoLists = a
            break;
        case "DOWNACTION":  // 下移
            // console.log("下移", payload)
            let Intemindex = payload.index
            // console.log(Intemindex)
            newState.todoLists.splice(Intemindex+2, 0, {id:payload.id, name:payload.name, age:payload.age, address: payload.address})
            let bb = newState.todoLists.filter(f => f.id == payload.id)[0]
            // console.log("bb", bb)
            // let newIndex = newState.todoLists.lastIndexOf(bb)
            let cc = newState.todoLists.indexOf(bb)
            // console.log("cc", cc)
            let dd = newState.todoLists.filter((f, index) => index !== cc)
            newState.todoLists = dd
            break;
        default:
            return newState;
            break;
    }

    return newState
}